<ul class="tab-nav">
  <li ng-class="{active: $ctrl.currentTab == 'columns'}">
    <a ng-click="$ctrl.setCurrentTab('columns')">Columns</a>
  </li>
  <li ng-class="{active: $ctrl.currentTab == 'options'}">
    <a ng-click="$ctrl.setCurrentTab('options')">Options</a>
  </li>
</ul>

<div ng-if="$ctrl.currentTab == 'options'" class="m-t-10 m-b-10">
  <div class="form-group">
    <label class="control-label">Time Interval</label>
    <select class="form-control" ng-model="$ctrl.options.timeInterval">
      <option value="daily">Daily</option>
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
    </select>
  </div>

  <div class="form-group">
    <label class="control-label">Mode</label>
    <select class="form-control" ng-model="$ctrl.options.mode">
      <option value="diagonal">Fill gaps with zeros</option>
      <option value="simple">Show data as is</option>
    </select>
  </div>
</div>

<div ng-if="$ctrl.currentTab == 'columns'" class="m-t-10 m-b-10">
  <div class="form-group">
    <label class="control-label">Date (Bucket)</label>
    <select class="form-control" ng-model="$ctrl.options.dateColumn"
      ng-options="col.name as col.name for col in $ctrl.data.columns"></select>
  </div>

  <div class="form-group">
    <label class="control-label">Stage</label>
    <select class="form-control" ng-model="$ctrl.options.stageColumn"
      ng-options="col.name as col.name for col in $ctrl.data.columns"></select>
  </div>

  <div class="form-group">
    <label class="control-label">Bucket Population Size</label>
    <select class="form-control" ng-model="$ctrl.options.totalColumn"
      ng-options="col.name as col.name for col in $ctrl.data.columns"></select>
  </div>

  <div class="form-group">
    <label class="control-label">Stage Value</label>
    <select class="form-control" ng-model="$ctrl.options.valueColumn"
      ng-options="col.name as col.name for col in $ctrl.data.columns"></select>
  </div>
</div>
